<template>
    <div>
        <Row type="flex" :gutter="16">
            <Col span="10">
                <Card dis-hover :animated="false">
                    <p slot="title">模块列表：</p>
                    <Button slot="extra" type="primary" v-hasC="modulebutshow.add" @click="modulehandleEdit(false)">添加模块</Button>
                    <JG-table
                        :data="moduledata"
                        :total="moduletotal"
                        :loading="moduleloading"
                        :butshow="modulebutshow"
                        :highlightRow="true"
                        :columns="modulecolumns"
                        @handleEdit="modulehandleEdit"
                        @on-current-change="classaskData">
                    </JG-table>
                </Card>
            </Col>
            <Col span="14">
                <Card dis-hover :animated="false">
                    <p slot="title">类型列表：</p>
                    <Button slot="extra" type="primary" v-hasC="classbutshow.add" @click="classhandleEdit(false)">添加类型</Button>
                    <JG-table
                        :data="classdata"
                        :total="classtotal"
                        :loading="classloading"
                        :butshow="classbutshow"
                        :columns="classcolumns"
                        @handleEdit="classhandleEdit">
                    </JG-table>
                </Card>
            </Col>
        </Row>
        <Modal v-model='modal' :title="edit?'编辑模块':'添加模块'" :mask-closable='false' @on-cancel="canceledit('modalname')">
            <Form ref='modalname' :label-width='90' :model='modalparams' :rules='createRules'>
                <FormItem label='模块名称: ' prop='name'>
                    <Input v-model="modalparams.name" placeholder="请填写模块名称"/>
                </FormItem>
                <FormItem label='模块标识: ' prop='value' required>
                    <Input :disabled="edit" v-model="modalparams.value" placeholder="请填写模块标识"/>
                </FormItem>
                <FormItem label='备注: '>
                    <Input v-model="modalparams.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写备注"/>
                </FormItem>
            </Form>
            <div slot='footer'>
                <Button @click="deleteedit()" v-hasC="modulebutshow.Delete" :loading="delete_loading" v-if="edit">删除</Button>
                <Button @click="canceledit('modalname')" v-else>取消</Button>
                <Button @click="submitedit('modalname')" :loading="submit_loading" type='primary'>保存</Button>
            </div>
        </Modal>
        <classmodal ref="classmodal" @askData="askData" :butshow="classbutshow" :moduledata="moduledata"/>
    </div>
</template>

<script>
    import { swtmodulegetmodule, swtmoduleupdatemodule, swtmoduledeletemodule, swtmodulegetmoduledetail } from '@api/templatecontrol'
    import classmodal from './classmodal';
    export default {
        name: 'templatecontrol',
        components: { classmodal },
        data () {
            return {
                moduledata: [],
                moduletotal: -1,
                moduleloading: false,
                modulebutshow: {
                    add: {
                        name: '-v1-swt-module-update-module',
                        flag: '/v1/swt/module/update-module'
                    },
                    Edit: {
                        name: '-v1-swt-module-update-module2',
                        flag: '/v1/swt/module/update-module'
                    },
                    Delete: {
                        name: '-v1-swt-module-delete-module',
                        flag: '/v1/swt/module/delete-module'
                    }
                },
                modulecolumns: [
                    { title: '模块名称', key: 'name', minWidth: 100 },
                    { title: '模块标识', key: 'value', width: 200 },
                    { title: '操作', slot: 'templatecontrolAdaction', fixed: 'right', width: 80 }
                ],
                classparams: { id: undefined },
                classdata: [],
                classtotal: -1,
                classloading: false,
                classbutshow: {
                    add: {
                        name: '-v1-swt-module-update-module-detail',
                        flag: '/v1/swt/module/update-module-detail'
                    },
                    Edit: {
                        name: '-v1-swt-module-update-module-detail2',
                        flag: '/v1/swt/module/update-module-detail'
                    },
                    Delete: {
                        name: '-v1-swt-module-delete-module-detail',
                        flag: '/v1/swt/module/delete-module-detail'
                    }
                },
                classcolumns: [
                    { title: '类型名称', key: 'name', minWidth: 100 },
                    { title: '类型标识', key: 'value', width: 200 },
                    { title: '备注', key: 'remark', width: 200 },
                    { title: '操作', slot: 'templatecontrolAdaction', fixed: 'right', width: 80 }
                ],
                edit: false,
                modal: false,
                modalparams: { id: 0, name: '', value: '', remark: '' },
                createRules: {
                    name: [{ required: true, message: '请填写模块名称', trigger: 'blur' }],
                    value: [{ required: true, message: '请填写模块标识', trigger: 'blur' }]
                },
                delete_loading: false,
                submit_loading: false
            };
        },

        mounted () {
            this.initial()
        },
        methods: {
            initial () {
                this.moduleaskData()
            },
            moduleaskData () {
                this.moduleloading = true
                swtmodulegetmodule().then(res => {
                    this.moduledata = res
                    if (res.length > 0) {
                        res[0]._highlight = true
                        this.classaskData(res[0])
                    }
                    this.moduleloading = false
                })
            },
            classaskData (row) {
                this.classparams.id = row.id
                this.classloading = true
                swtmodulegetmoduledetail(this.classparams).then(res => {
                    this.classdata = res
                    this.classloading = false
                })
            },
            askData () {
                this.classloading = true
                swtmodulegetmoduledetail(this.classparams).then(res => {
                    this.classdata = res
                    this.classloading = false
                })
            },
            modulehandleEdit (row) {
                if (row) {
                    this.edit = true
                    this.modalparams = { id: row.id, name: row.name, value: row.value, remark: row.remark }
                } else {
                    this.edit = false
                    this.modalparams = { id: 0, name: '', value: '', remark: '' }
                }
                this.modal = true
            },
            classhandleEdit (bool) {
                this.$refs.classmodal.initial(bool)
            },
            deleteedit () {
                this.delete_loading = true
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '删除模块，将同步删除模块对应的类型参数等',
                    onOk: () => {
                        swtmoduledeletemodule({ id: this.modalparams.id }).then(res => {
                            this.$Message.success('删除模块成功');
                            this.moduleaskData()
                            this.modal = false
                            this.delete_loading = false
                        })
                    },
                    onCancel: () => {
                        this.delete_loading = false
                    }
                });
            },
            canceledit (name) {
                this.modal = false
                this.$refs[name].resetFields();
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.submit_loading = true
                        swtmoduleupdatemodule(this.modalparams).then(res => {
                            if (this.edit) this.$Message.success('修改模块成功');
                            else this.$Message.success('添加模块成功');
                            this.moduleaskData()
                            this.modal = false
                            this.submit_loading = false
                        })
                    }
                })
            }
        }
    };
</script>

<style lang="less" scoped>

</style>
